<template>
  <div class="orders">
    <div class="title">
      <img src="@/assets/logo.jpg" alt="">
      宏香馨商城
      <span>{{ stateText }}</span>
    </div>
    <div class="goodInfo-wrap">
      <div class="goodInfo">
        <img :src="imgUrl" alt="">
        <div class="textInfo">
          <h5 class="goodName">{{ goodName }}</h5>
          <p class="taocanIndex">{{ info.package_name }}</p>
          <p>{{ info.menu_id | category_name }}</p>
          <div class="bottom_text">
            <span class="price">￥{{ info.price }}</span>
            <span class="places">×{{ info.num }}</span>
          </div>
        </div>
      </div>
    </div>
    <p class="total" v-show="countShow">
      <input type="button" value="评价" class="comment" @click="toAddComment" v-show="this.info.root_menu_id == 13 ? false : info.pay_status == 1 ? false : info.comment == 'Y' ? false : true">
      共{{ info.num }}件商品 合计：<span>￥{{ info.total_price}}</span>
    </p>
  </div>
</template>

<script>
import { getZcGood } from "@/api/index";
import { getGood } from "@/api/mid-autumn.js";
import { getTeaSamplesInfo } from "@/api/chayang";
export default {
  data() {
    return {
      imgUrl: "",
      goodName: "",
      stateText: ""
    };
  },
  props: ["countShow", "params", "state", "info", "cancel"],
  created() {
    console.log(this.info)
    switch (this.info.root_menu_id) {
      case "13":
        getZcGood(this.info.good_id).then(result => {
          this.imgUrl = result.data.image;
          this.goodName = result.data.name;
        });
        break;
      case "12":
        getGood(this.info.good_id).then(result => {
          this.imgUrl = result.data.image;
          this.goodName = result.data.name;
        });
        break;
      case "16":
        getTeaSamplesInfo(this.info.good_id).then(result => {
          this.imgUrl = result.data.image;
          this.goodName = result.data.name;
        });
        break;
    }
    // if (this.info.root_menu_id == 13) {
    //   getZcGood(this.info.good_id).then(result => {
    //     this.imgUrl = result.data.image;
    //     this.goodName = result.data.name;
    //   });
    // } else {
    //   getTeaSamplesInfo(this.info.good_id).then(result => {
    //     this.imgUrl = result.data.image;
    //     this.goodName = result.data.name;
    //   });
    // }
    if (this.state == 0) {
      //如果组件在确认订单页面使用
      this.stateText = "【现货】";
    } else {
      //如果在订单列表使用
      // console.log(this.info.express_number, this.info.express_number == "");
      // console.log(this.info.pay_status, "??????????????");
      if (this.info.pay_style === "COD") {
        //如果付款方式为货到付款
        if (this.info.express_number == "") {
          this.stateText = "准备发货（货到付款）";
        } else {
          this.stateText = "商家已发货（货到付款）";
        }
      } else {
        //付款方式为微信支付
        if (this.info.pay_status == 1) {
          this.stateText = "等待您付款";
        } else {
          if (this.info.express_number == "") {
            this.stateText = "准备发货（在线支付）";
          } else {
            this.stateText = "商家已发货（在线支付）";
          }
        }
      }
    }
  },
  filters: {
    category_name(menu_id) {
      switch (menu_id) {
        case "13":
          return '[众筹]';
          break;
        case "17":
          return '[中秋特价]';
          break;
        case "16":
          return '[免费试饮]';
          break;
      }
    }
  },
  methods: {
    toAddComment() {
      this.$router.push("/addComment?good_id=" + this.info.good_id);
    }
  },
  watch: {
    cancel(val, oldVal) {
      if (val == true) {
        this.stateText = "交易关闭";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.orders {
  background-color: #fff;
  .title {
    height: to(68);
    line-height: to(68);
    padding: 0 to(18);
    img {
      width: to(23);
      vertical-align: middle;
      margin-right: to(4);
      border-radius: 50%;
    }
    font-size: to(23);
    color: #505050;
    span {
      float: right;
      color: #ff4e00;
    }
  }
  .total {
    margin: 0;
    font-size: to(24);
    color: #404040;
    text-align: right;
    padding: 0 to(15);
    border-bottom: 1px solid #fcfcfc;
    line-height: to(68);
    position: relative;
    .comment {
      background-color: #fff;
      border: 1px solid #aa0000;
      padding: to(3) to(18);
      font-size: to(22);
      border-radius: to(8);
      position: absolute;
      left: to(20);
      top: 50%;
      transform: translateY(-50%);
      color: #aa0000;
    }
    span {
      color: #aa0000;
    }
  }
  .handle {
    height: to(43);
    line-height: to(0);
    padding: 0 to(15);
    margin-top: to(15);
    span {
      font-size: to(25);
      color: #404040;
      line-height: to(43);
      &.num {
        color: #aa0000;
      }
    }
    input {
      float: right;
      height: 100%;
      width: to(104);
      color: #000;
      background-color: #fff;
      border: 1px solid #c8c8c8;
      border-radius: to(5);
      font-size: to(25);
      &.pay {
        color: white;
        border: 0;
        background-color: #aa0000;
        margin-left: to(27);
      }
    }
  }
}
.goodInfo-wrap {
  padding: to(15) to(18);
  height: to(185);
  background-color: #f3f3f3;
  .goodInfo {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      width: to(124);
      height: to(124);
    }
    .textInfo {
      position: absolute;
      width: 100%;
      padding-left: to(141);
      top: 0;
      right: 0;
      height: 100%;
      h5 {
        margin: 0;
        font-size: to(27);
        line-height: to(45);
      }
      p {
        margin: 0;
        font-size: to(22);
        color: #8e8d8d;
        line-height: to(45);
      }
      .bottom_text {
        height: to(30);
        line-height: to(40);
        span {
          font-size: to(22);
          line-height: to(30);
          // vertical-align: bottom;
          &.places {
            float: right;
          }
          &.price {
            color: #aa0000;
            font-size: to(27);
            float: left;
          }
        }
      }
    }
  }
}
</style>
